/**
 * 学习目标：事件处理
 */
import React from 'react';
import ReactDOM from 'react-dom';

// Vue中的this会指向Vue组件本身的实例对象

class Hello extends React.Component {
  state = {
    msg: 'hello React',
  };

  // React自带的结构体，自带的钩子函数
  // render函数中的this指向组件的实例对象，React的在底层源码中处理过了this
  render() {
    return (
      <div>
        {/* 解决方案2: 可以通过render函数中this指向没问题，绑定事件时绑定一个箭头函数来解决this的指向问题 */}
        <button onClick={() => this.handleClick()}>点我访问this</button>
        {/* 解决方案3: 使用bind在render函数中绑定this*/}
        <button onClick={this.handleClick.bind(this)}>
          点我通过bind访问this
        </button>
      </div>
    );
  }

  // 自定义的处理函数, 它在class语法中，this指向了undefined
  // handleClic(){
  //   console.log(this, 'this'); //undefined
  // }

  // 最推荐的解决方案1：箭头函数中没有this指向问题，借助于调用时，this会指向父级，也就是指向了组件本身
  handleClick = () => {
    console.log(this, 'this'); // 组件本身
  };
}

ReactDOM.render(<Hello />, document.getElementById('root'));
